<template>
  <!-- ======= Contact Section ======= -->

  <section
    class="contact"
    data-aos="fade-up"
    data-aos-easing="ease-in-out"
    data-aos-duration="500"
    v-if="contact"
  >
    <div class="container">
      <div class="row">
        <div class="col-md-5">
          <div class="row">
            {{ void (temp = jsonStringTojsObject(contact.contentDescription)) }}
            <div class="col-md-12">
              <div class="info-box">
                <i class="bi bi-map"></i>
                <h3>地址</h3>
                <p>{{ temp.address }}</p>
              </div>
            </div>
            <div class="col-md-6">
              <div class="info-box">
                <i class="bi bi-envelope"></i>
                <h3>电子邮箱</h3>
                <p>{{ temp.email }}</p>
              </div>
            </div>
            <div class="col-md-6">
              <div class="info-box">
                <i class="bi bi-telephone"></i>
                <h3>联系电话</h3>
                <p>{{ temp.tel }}</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-7"><div id="mapContainer"></div></div>
      </div>
    </div>
  </section>
  <!-- End Contact Section -->
</template>

<script>
// import TMap from "TMap";
import { jsonStringTojsObject } from "@/api/index.js";

import {
  reactive,
  toRefs,
  onBeforeMount,
  onMounted,
  getCurrentInstance,
  computed,
} from "vue";
export default {
  name: "",
  components: {},
  props: {},
  setup() {
    const { proxy } = getCurrentInstance();
    console.log(proxy);
    const data = reactive({
      contact: computed(() => {
        return proxy.$store.getters.getContact;
      }),
    });
    const refData = toRefs(data);
    onBeforeMount(() => {});
    onMounted(() => {
      methods.initTMap();
    });
    //自定义方法
    const methods = {
      jsonStringTojsObject,
      initTMap() {
        // 初始化地图
        console.log(document.getElementById("mapContainer"));

        //初始化地图
        var center = new TMap.LatLng(23.050675, 113.25095);

        // 初始化地图
        var map = new TMap.Map("mapContainer", {
          zoom: 17, // 设置地图缩放
          center: center, // 设置地图中心点坐标，
          pitch: 0, // 俯仰度
          rotation: 0, // 旋转角度
        });

        // MultiMarker文档地址：https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocMarker
        var marker = new TMap.MultiMarker({
          map: map,
          styles: {
            // 点标记样式
            marker: new TMap.MarkerStyle({
              width: 20, // 样式宽
              height: 20, // 样式高
              anchor: { x: 10, y: 20 }, // 描点位置
            }),
          },
          geometries: [
            // 点标记数据数组
            {
              // 标记位置(纬度，经度，高度)
              position: center,
              id: "marker",
            },
          ],
        });
        //监听地图瓦片加载完成事件
        map.on("tilesloaded", function () {
          console.log("地图瓦片已加载完成");
        });
      },
      initTMap2() {
        var center = new qq.maps.LatLng(39.982163, 116.30607);
        var map = new qq.maps.Map(document.getElementById("container"), {
          center: center,
          zoom: 16,
        });
        //添加定时器
        setTimeout(function () {
          var marker = new qq.maps.Marker({
            position: center,
            animation: qq.maps.MarkerAnimation.DROP,
            map: map,
          });
          //marker.setAnimation(qq.maps.Animation.DROP);
        }, 2000);
      },
      loadScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src =
          "https://map.qq.com/api/gljs?v=1.exp&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77";
        document.body.appendChild(script);
      },
    };
    return {
      ...refData,
      ...methods,
    };
  },
};
</script>
<style scoped>
.contact {
  padding-bottom: 30px;
}
.contact .info-box {
  color: #444;
  text-align: center;
  box-shadow: 0 0 30px rgba(214, 215, 216, 0.6);
  padding: 20px 0 30px 0;
  margin-bottom: 30px;
}
.contact .info-box i {
  font-size: 1rem;
  color: #68a4c4;
  border-radius: 50%;
  padding: 8px;
  border: 2px dotted #a2cce3;
}
.contact .info-box h3 {
  font-size: 20px;
  color: #666;
  font-weight: 700;
  margin: 10px 0;
}
.contact .info-box p {
  padding: 0;
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

/* 地图 */
#mapContainer {
  width: 100%;
  height: 500px;
}
</style>
